<template>
    <div>
        <div>
            <div class="title-div">
                <span>今日抽奖物品</span>
                <p>{{goodsName}}</p>
            </div>
            <div class="input-div">
                <el-input class="qq-input"
                          placeholder="请输入QQ"
                          prefix-icon="el-icon-user"
                          v-model="qq"
                          clearable>
                </el-input>
                <span style="display: block">每个QQ只能参与一次并且必须是群成员</span>
                <el-button id="submit-button" @click="submitData" type="primary" icon="el-icon-check"
                           circle></el-button>
                <!--                <el-button type="primary">提交</el-button>-->
            </div>
        </div>

        <!-- 列表展示参与的人 -->
        <div id="table-div">
            <span>已参与用户</span>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    stripe
            >
                <el-table-column
                        prop="name"
                        label="QQ"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="日期"
                        min-width="100">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {addRecord, getCurrentGoodsList, pagePerson} from "../request/api";

    export default {
        data() {
            return {
                goodsId: "",
                goodsName: "",
                qq: "",
                tableData: []
            }
        },
        methods: {
            submitData() {
                let data = {}
                data.qq = this.qq
                data.goodsId = this.goodsId
                console.log(data)
                addRecord(data).then((res) => {
                    console.log(res)
                    this.$message('参与成功');
                    this.pagePerson()
                }).catch((err) => {
                    this.$message.error(err)
                    console.error(err)
                })
            },
            pagePerson() {
                let page = {}
                page.current = 1
                page.size = 10
                pagePerson(page).then((res) => {
                    let records = res.records
                    let data = []
                    for (let record of records) {
                        console.log(record)
                        let item = {}
                        item.name = record.qq
                        item.date = record.createTime
                        data.push(item)
                    }
                    console.log(data)
                    this.tableData = data
                })
            },
            getCurrentGoods() {
                getCurrentGoodsList().then((res) => {
                    console.log(res)
                    let goodsName = ""
                    let goodsId = []
                    for (let item of res) {
                        goodsName += item.name
                        goodsName += ','
                        goodsId.push(item.id)
                    }
                    if(goodsName.length > 0) {
                        this.goodsName = goodsName.substring(0, goodsName.length - 1)
                        this.goodsId = goodsId
                    }
                }).catch((err) => {
                    this.$message.error(err)
                    console.error(err)
                })
            }
        },
        created() {
            this.pagePerson()
            this.getCurrentGoods()
        }
    }
</script>

<style scoped lang="less">
    .title-div {
        text-align: center;
        margin-top: 20px;
        font-size: 25px;
    }

    .input-div {
        margin-top: 30px;
        width: 100%;
        text-align: center;

        .qq-input {
            display: block;
            margin-left: 15%;
            width: 70%;
        }
    }

    #submit-button {
        margin-top: 15px;
        width: 60px;
        height: 60px;
    }

    #table-div {
        margin-top: 50px;

        span {
            font-weight: bold;
        }
    }

</style>